<template>
    <div class="main-page">
        <el-form :model="formData" label-width="100px" label-position="labelPosition" ref="formData"
                 size="mini" class="demo-form-inline">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="主任老师">
                        <el-select @change="initData" size="mini" class="search-input" v-model="formData.eid"
                                   placeholder="请选择老师">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gempList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="归属教室">
                        <el-select @change="initData" size="mini" class="search-input" v-model="formData.rid"
                                   placeholder="请选择学生状态">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in groomList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="班级状态">
                        <el-select @change="initData" size="mini" class="search-input" v-model="formData.classstatus"
                                   placeholder="班级状态">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gclassStatusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="搜索班级">
                        <el-col :span="6">
                            <el-input @change="initData" filterable suffix-icon="el-icon-search" @click="initData" class="search-input" label="学生姓名"
                                      v-model="formData.classname"
                                      placeholder="必填"></el-input>
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="classType==2">
                    <el-form-item label="选择学生">
                        <el-select    filterable @change="initData" size="mini" class="search-input" v-model="formData.eid"
                                   placeholder="请选择学生">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in  gstuList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
                <el-button type="info" @click="this.addClassPanel" size="mini" icon="el-icon-search">添加科班</el-button>
            </el-row>
        </el-form>
        <div class="table_container">
            <el-table
                style="width: 100%;"
                v-loading="loading"
                :data="tableData"
                highlight-current-row
            >
                <el-table-column
                    property="id"
                    label="编号"
                    min-width="5%">
                    <template slot-scope="scope">
                        <p>{{scope.row.id }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="id"
                    label="班级名称"
                    min-width="10%">
                    <template slot-scope="scope">
                        <el-button @click="clsDetail()" size="mini" type="info">{{scope.row.name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    property="ename"
                    label="班主任"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.ename }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="room"
                    label="教室"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.roomname }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="maxstu"
                    label="人数上线"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.maxstus }}人</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="maxstu"
                    label="科目"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.maxstus }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="maxstu"
                    label="已上课节数"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.maxstus }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="maxstu"
                    label="剩余课节数"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.maxstus }}</p>
                    </template>
                </el-table-column>

                <el-table-column
                    property="createtime"
                    label="创建时间"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.createtime | dateFmt }}</p>
                    </template>
                </el-table-column>

                <el-table-column
                    property="updatetime"
                    label="更新时间"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.updatetime | dateFmt}}</p>
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    min-width="15%">
                    <template scope="scope">
                        <el-button-group>
                            <el-button @click="modifySubjectPanel(scope.$index,scope.row)" class="col-btn" size="mini"
                                       type="primary"
                                       icon="el-icon-edit"></el-button>
                            <el-button @click="deleteSubjectOper(scope.$index,scope.row)" class="col-btn" size="mini"
                                       type="primary"
                                       icon="el-icon-delete"></el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pager.pageNo"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="this.pager.pageSize"
                    layout=" prev, pager, next,jumper"
                >
                </el-pagination>
            </div>
            <el-dialog
                title="创建科班"
                :visible.sync="addClssDialogVisible"
            >
                <el-tabs
                    v-model="addActiveIndex"
                >
                    <el-tab-pane
                        label="添加班级"
                        name="room">
                        <add-class ref="addClassPanel"></add-class>

                    </el-tab-pane>
                    <el-tab-pane
                        label="添加一对一" name="o2o">
                        <el-steps :active="o2oActive">
                            <el-step title="选择学生">
                            </el-step>
                            <el-step title="计划排期">
                            </el-step>
                        </el-steps>
                        <el-select v-show="this.o2oActive===1" filterable size="mini" class="search-input" v-model="selectstu"
                                   placeholder="请选择学生">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in  gstuList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <scheduleClass v-show="o2oActive===2"  ref="o2oscheduPanel">
                        </scheduleClass>
                        <el-row type="flex" justify="center">
                            <el-button  v-show="o2oActive===1" @click="o2onext" type="primary" plain size="mini">下一步</el-button>
                            <el-button v-show="o2oActive===2" @click="o2obefore" type="primary" plain size="mini">上一步</el-button>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="添加课程" name="class">
                        <el-steps :active="classActive">
                            <el-step title="创建课程">
                            </el-step>
                            <el-step title="计划排期">

                            </el-step>
                        </el-steps>

                        <el-select v-show="this.classActive===1" filterable size="mini" class="search-input" v-model="selectcls"
                                   placeholder="请选择班级">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in  gclassList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>

                        <scheduleClass v-show="classActive===2"  ref="classscheduPanel">
                        </scheduleClass>

                        <el-row type="flex" justify="center">
                            <el-button  v-show="classActive===1" @click="classnext()" type="primary" plain size="mini">下一步</el-button>
                            <el-button v-show="classActive===2" @click="classbefore()" type="primary" plain size="mini">上一步</el-button>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>

                <template slot="footer">
                    <el-row type="flex" justify="end">
                        <el-button @click="closeadd" type="info" plain size="mini">取消</el-button>
                        <el-button @click="confirmpanel" type="primary" plain size="mini">确认</el-button>
                    </el-row>
                </template>
            </el-dialog>
        </div>

    </div>


</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {clsListApi, addClsApi, selectEmps, addRoomApi} from '@/api/getData'
    import addRoom from '@/page/components/addRoom.vue'
    import scheduleClass from '@/page/components/scheduleClass.vue'
    import addClass from '@/page/components/addClass.vue'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        watch:{
            addActiveIndex:function(val,old){
                if(this.isEditing){
                    this.$confirm('确认切换？')
                        .then(_ => {
                            this.addActiveIndex=val;
                            this.isEditing=false;

                        })
                        .catch(_ => {
                            this.addActiveIndex=old;
                        });

                }
            }
        },
        data() {
            return {
                isEditing:false,
                addForm:{},
                selectstu:null,
                selectcls:null,
                o2oActive:1,
                classActive:1,
                classType: 2,
                addActiveIndex: "room",
                addClssDialogVisible: false,
                addOneTooneDialogVisible: false,
                addCommonDialogVisible: false,
                loading: false,
                pager: {pageNo: 1, pageSize: 5},
                classrange: '',
                empsList: [],
                formData: {},
                tableData: [],
                count: 0,
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,
            addRoom,
            addClass,
            scheduleClass,

        },
        computed: {
            ...mapGetters(['gempList', 'gsubjectList', 'groomList', 'gclassStatusList', 'gstuList','gclassList'])
        },
        created() {
        },
        mounted() {
            // this.classType = this.$route.query.classType;
            this.initData();

        },
        methods: {
            ...mapActions(['getPeriod']),
            clsDetail: function () {
                this.$router.push({path: '/classDetail'});
            },

            o2onext:function(){
                this.isEditing=true;
              this.o2oActive=2;
            },
            o2obefore:function(){
              this.o2oActive=1;
            },
            classnext:function(){
                this.isEditing=true;
                this.classActive=2;
            },
            classbefore:function(){
                this.classActive=1;
            },

            async selectEmps(v) {
                const res = await queryEmps({data: {name: v}});
                if (res.success == true) {
                    this.selectEmps = res.data;
                } else {

                }

            },
            closeadd() {
                this.addClssDialogVisible = false;
                this.addForm={};
            },

            async selectCls(v) {
                const res = await queryClss({data: {name: v}});
                if (res.success == true) {
                    this.selectClss = res.data;
                } else {

                }

            },


            handleCurrentChange: function () {

            },
            handleSizeChange: function () {

            },
            closepanel: function () {

            },
            checkPanelParam:function(){
                var name = this.addActiveIndex;
                if (name == 'room') {
                    var valid = this.$refs.addRoomPanel.validForm();
                    return valid;
                }
                else if(name=='o2o'){
                    var valid = this.$refs.addRoomPanel.validForm();
                    return valid;

                }
                else if(name=='class'){
                    var valid = this.$refs.addRoomPanel.validForm();
                    return valid;

                }
            }   ,


            alertParamError(){
                if(result==false){
                    this.$notify({
                        title: '关键字段',
                        message: '关键属性未填写!',
                        type: 'warn'
                    });

                }
            },


            confirmpanel: function () {
              /*  var check=this.checkPanelParam();
                if(!check){
                    alertParamError();
                    return;
                }*/
                var name = this.addActiveIndex;
                if (name == 'room') {
                     this.addRoom();

                } else if (name == 'o2o') {
                   this.addOneToOne();

                } else {
                this.addClassOper();
                }
                this.closeadd();

            },
            //添加普通班级
            async addClassOper() {
                this.addForm.cid=this.selectcls;
                this.addForm.schedule=this.$refs.classscheduPanel.childForm;
                console.info('addclassForm:'+JSON.stringify(this.addForm));
                const res = await addClsApi({data: this.addForm});
                if (res.success == true) {
                    this.$notify({
                        title: '成功',
                        message: '添加成功!',
                        type: 'success'
                    });
                    this.initData();
                }
                else {
                    console.error(
                        "something is error"
                    )

                }
            },
            //添加一对一
            async addOneToOne() {
                this.addForm.sid=this.selectstu;
                this.addForm.schedule=this.$refs.o2oscheduPanel.childForm;
                console.info('addO2OForm:'+JSON.stringify(this.addForm));
                const res = await addRoomApi({data: this.addForm});
                if (res.success == true) {
                    this.$notify({
                        title: '成功',
                        message: '添加成功!',
                        type: 'success'
                    });
                    this.initData();
                }
                else {
                    console.error(
                        "something is error"
                    )
                }

            },
            async addRoom() {
                this.addForm = this.$refs.addClassPanel.childForm;
                console.info('addRoomForm:'+JSON.stringify(this.addForm));
                const res = await addClsApi({data: this.addForm});
                if (res.success == true) {
                    this.$notify({
                        title: '成功',
                        message: '添加成功!',
                        type: 'success'
                    });
                    this.initData();
                }
                else {
                    console.error(
                        "something is error"
                    )

                }

            },
            addClassPanel() {
                this.addClssDialogVisible = true;
            },
            async initData() {
                this.tableData = [];
                this.formData.pager = this.pager;
                this.formData.radd = {iename: true, isname: true, iroomname: true};
                const res = await clsListApi({data: this.formData});
                if (res.success == true) {
                    var list = res.data;
                    list.forEach(item => {
                        const tableData = {};
                        tableData.id = item.id;
                        tableData.maxstus = item.maxstus;
                        tableData.status = item.status;
                        tableData.createtime = item.createtime;
                        tableData.updatetime = item.updatetime;
                        tableData.orgid = item.orgid;
                        tableData.eid = item.eid;
                        tableData.ename = item.ename;
                        tableData.name=item.name;
                        tableData.roomname = item.roomname;
                        tableData.type = item.type;

                        this.tableData.push(tableData);
                    })

                } else {

                }

            }

        },
    }
</script>
<style lang="less">
    @import '../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }
</style>
